<html>
    <head>
        <title>Diagram Model</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="fonts/css/font-awesome.min.css" />
        <script type="text/javascript" src="js/mxClient.js"></script>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
        <script type="text/javascript" src="js/bootstrap.min.js" ></script>
        <style type="text/css">
            .mxWinPanel { margin-top: 0 }
        </style>
    </head>
    <body>
        <div id="ogmsDiagramContainer" >
        </div>
        <script type="text/javascript" src="js/ogmsDiagram.js" ></script>
        <script type="text/javascript" >
            var diagram = new OGMSDiagram();
            diagram.init( $('#ogmsDiagramContainer'), 
                {
                    width : 1000,       //! Width of panel 
                    height : 600,       //! Height of panel
                    enabled : true      //! Edit enabled
                },
                {
                    x : 500,            //! X postion of state information window
                    y : 0,              //! Y postion of state information window
                    width: 520,         //! Width of state information window
                    height: 650         //! Height of state information window
                },
                {
                    x : 1000,           //! X postion of data reference information window
                    y : 0,              //! Y postion of data reference information window
                    width: 300,         //! Width of data reference information window
                    height: 400         //! Height of data reference information window
                },
                'images/modelState.png',    //! state IMG
                'images/grid.gif',          //! Grid IMG
                'images/connector.gif',     //! Connection center IMG
                false,                      //! Debug button
                function(handle){
                    var jsStates = JSON.parse(handle.format2JSON());
                    for (var i = 0; i < jsStates.states.length; i++){
                        handle.setStateAsFinished(jsStates.states[i].id);
                    }
                }
            );
            diagram.onStatedbClick(function(state){
                diagram.showStateWin({
                    x : 500,
                    y : 0
                },{
                    width : 520,
                    height : 650
                });
            });
        </script>
    </body>
</html>
    